import React from 'react'
import {useEffect,useState,useRef} from "react"
import axios from 'axios'
function App() {
  let rightRef = useRef(null)
  let [arr,setArr] = useState([])
  useEffect(()=>{
    axios.get("/list").then(res=>{
        setArr(res.data)

    })
  },[])
  let changeIndex = (index)=>{
        console.log(index);
        console.log(rightRef.current);
        rightRef.current.children[index].scrollIntoView({behavior: "smooth"})
  }
  return (
    <div className='appwrap'>
        <div className='left'>
            {
                arr && arr.length ? arr.map((item,index)=>{
                    return <div key={index} onClick={()=>changeIndex(index)}>{item.tit}</div>
                }):"暂无数据"
            }
        </div>
        <div className='right' ref={rightRef}>
             {
                arr && arr.length ? arr.map((item,index)=>{
                    return <div key={index}>
                           <h4>{item.tit}</h4>
                           <div style={{height:"150px",background:"skyblue"}}></div>
                    </div>
                }):"暂无数据"
            }
        </div>
    </div>
  )
}

export default App